<template>
    <div>
       <yh-dialog drag title="查询计算因子" :visible.sync="visibleTemp" width="500px" :close-on-click-modal="false">
            <div style="width: 300px; margin: auto">
                <el-row style="margin-bottom: 10px">
                    <el-col :span="5">因子编码</el-col>
                    <el-col :span="19"><el-input v-model="searchParam.entryCalculateFactorCode" size="mini" clearable/></el-col>
                </el-row>
                <el-row style="margin-bottom: 10px">
                    <el-col :span="5">因子名称</el-col>
                    <el-col :span="19"><el-input v-model="searchParam.entryCalculateFactorName" size="mini" clearable/></el-col>
                </el-row>
                <el-row style="margin-bottom: 10px">
                    <el-col :span="5">变动类型</el-col>
                    <el-col :span="19">
                        <el-select size="mini" v-model="searchParam.changeType" clearable style="width: 100%">
                            <el-option
                                v-for="item in factorChangeTypes"
                                :key="item.dictKey"
                                :label="item.dictKey + ' ' + item.dictKeyName"
                                :value="item.dictKey"
                            >
                            </el-option>
                        </el-select>
                    </el-col>
                </el-row>
                <el-row style="margin-bottom: 10px">
                    <el-col :span="5">作用范围</el-col>
                    <el-col :span="19">
                        <el-select size="mini" v-model="searchParam.riskCalType" clearable style="width: 100%">
                            <el-option
                                v-for="item in riskCalcTypes"
                                :key="item.dictKey"
                                :label="item.dictKey + ' ' + item.dictKeyName"
                                :value="item.dictKey"
                            >
                            </el-option>
                        </el-select>
                    </el-col>
                </el-row>
                <el-row style="margin-bottom: 10px">
                    <el-col :span="5">启用状态</el-col>
                    <el-col :span="19">
                        <el-select size="mini" v-model="searchParam.validSymbol" clearable style="width: 100%">
                            <el-option
                                v-for="item in validSymbols"
                                :key="item.dictKey"
                                :label="item.dictKey + ' ' + item.dictKeyName"
                                :value="item.dictKey"
                            >
                            </el-option>
                        </el-select>
                    </el-col>
                </el-row>
                <el-row style="margin-bottom: 10px">
                    <el-col :span="5">风险类型</el-col>
                    <el-col :span="19">
                        <el-select size="mini" v-model="searchParam.entryType" clearable style="width: 100%">
                            <el-option
                                v-for="item in entryTypes"
                                :key="item.dictKey"
                                :label="item.dictKey + ' ' + item.dictKeyName"
                                :value="item.dictKey"
                            >
                            </el-option>
                        </el-select>
                    </el-col>
                </el-row>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button size="mini" @click="reset">重 置</el-button>
                <el-button size="mini" @click="closeModal">取 消</el-button>
                <el-button size="mini" type="primary" @click="onSubmit">确 定</el-button>
            </div>
       </yh-dialog>
    </div>
</template>

<script lang="ts">
import { Component, Emit, Prop, Vue, Watch } from 'vue-property-decorator';
import DictionConstUtil from '@/utils/diction-const-util';

@Component({ name: 'RangeIndicatorsSearch' })
export default class RangeIndicatorsSearch extends Vue {
    private riskCalcTypes = DictionConstUtil.PojoToList(DictionConstUtil.RiskCalType).filter(item => ['0', '1'].includes(item.dictKey));
    private factorChangeTypes = DictionConstUtil.PojoToList(DictionConstUtil.CalFactorChangeType);
    private validSymbols = DictionConstUtil.PojoToList({ '0': '禁用', '1': '启用' });
    private entryTypes = DictionConstUtil.PojoToList(DictionConstUtil.EntryType);

    @Prop({ default: false }) readonly visible!: boolean;
    @Prop({ required: true, type: Object }) readonly searchData!: any;
    private visibleTemp: boolean = false;
    private searchParam = {
        entryCalculateFactorCode: '',
        entryCalculateFactorName: '',
        changeType: '',
        riskCalType: '',
        validSymbol: '',
        entryType: '',
    };

    @Watch('visibleTemp')
    onWatchVisibleTemp(value: boolean) {
        if (value !== this.visible) {
            this.$emit('update:visible', value);
        }
    }

    @Watch('visible')
    onWatchVisible(value: boolean) {
        this.visibleTemp = value;
        if (value) {
            this.searchParam = { ...this.searchData };
        }
    }

    reset() {
        this.searchParam = {
            entryCalculateFactorCode: '',
            entryCalculateFactorName: '',
            changeType: '',
            riskCalType: '',
            validSymbol: '',
            entryType: '',
        };
    }

    closeModal() {
        this.visibleTemp = false;
    }

    @Emit()
    onSubmit() {
        this.visibleTemp = false;
        return this.searchParam;
    }
}
</script>
